<template>
	<view class="container">
		<scroll-view>
			<view class="logo">
				<img src="../../static/img/mine/mine-bg.png"></img>
			</view>
			<view class="content">
				<view class="card">
					<view class="mine-info">
						<view class="name">丁少华</view>
						<view class="info">个人信息></view>
					</view>
					<view class="mine-info-id">
						41**************34
					</view>
					<u-line></u-line>
					<view class="title" @click="onClickTitle">北京朝阳医院本部-{{title}}</view>

					<view class="effct"><text class="etitle">有效期：</text><text
							class="ectx">{{new Date().getFullYear()}}-{{new Date().getMonth()+1}}-{{new Date().getDate()}}</text>
					</view>
					<view style="height: 10px;"></view>
					<view class="qr">
						<img src="../../static/img/mine/qr.png"></img>
					</view>
					<view class="status">绿码:低风险</view>
					<view class="edit"><img src="../../static/img/mine/edit.png"></img> 修改申报</view>
					<view class="sbmt">
						<u-button><img src="../../static/img/mine/saom.png"></img> 扫描二维码</u-button>
					</view>
				</view>
				<view class="card" style="padding: 20px;">
					<view class="row" v-for="item in results" :key="item.label">
						<view class="start">
							{{item.label}}
							<view class="start-status">
								{{item.status}}
							</view>
						</view>
						<view class="end">
							{{item.val}}
						</view>
					</view>
				</view>

				<view class="card">
					<view class="more-tools">
						<view class="tool" v-for="item in tools" :key="item.label">
							<view class="logo">
								<img :src="`../../static/img/mine/${item.logo}`"></img>
							</view>
							<view class="label">
								{{item.label}}
							</view>
						</view>
					</view>
				</view>

				<view class="service_title">更多服务</view>
				<view class="service">
					<img src="../../static/img/mine/pass_icon.png"></image>
					<text>通信大数据行程卡</text>
				</view>
			</view>


		</scroll-view>
	</view>
</template>
<script>
	import {
		results,
		tools
	} from './helper.js';
	export default {
		data() {
			return {
				results,
				tools,
				title: '东门'
			}
		},
		onLoad(option) {
			this.title = option.title;
		},
		methods: {
			onClickTitle(){
				
			}
		}
	}
</script>

<style lang="scss">
	.container {
		min-height: 100vh;
		background-color: #eeeeee;

		.logo {
			img {
				width: 100%;
				height: 180px;
			}
		}

		.content {
			position: relative;
			top: -56px;
			z-index: 123;

			.service_title {
				font-size: 16px;
				padding: 20rpx 30rpx;
				font-weight: 700;
			}

			.service {
				border-radius: 20rpx;
				height: 60px;
				margin: 0 30rpx 20rpx;
				padding: 0 20px;
				display: flex;
				justify-content: space-between;
				align-items: center;

				background: url(../../static/img/mine/pass_bg.png) no-repeat;
				background-size: 100% 100%;

				img {
					width: 30px;
					height: 30px;
				}

				font-size: 16px;
				font-weight: 700;
			}

			.card {
				padding-top: 40rpx !important;
				background: #fff;
				border-radius: 20rpx;
				height: 100%;
				margin: 0 30rpx 20rpx;
				padding: 20rpx 30rpx;
				text-align: center;



				.more-tools {
					display: flex;

					.tool {
						.logo {
							img {
								width: 60px;
								height: 60px;
							}
						}
					}

				}

				.mine-info {
					display: flex;
					justify-content: space-between;

					.name {
						font-size: 17px;
						font-weight: 700;
					}

					.info {
						color: #0079fe;
						font-size: 12px;
					}
				}

				.mine-info-id {
					margin: 10px 0;
					color: #666666;
					text-align: left;
					font-size: 12px;
				}

				.title {
					margin-top: 20px;
					font-size: 20px;
					font-weight: 700;
				}

				.effct {
					margin-top: 10px;

					.etitle {

						// font-size: 17px;
					}

					.ectx {

						font-size: 24px;
						font-weight: 700;
						color: #0079fe;
					}

				}

				@keyframes identifier {
					0% {
						background: url(../../static/img/mine/aaa.png) no-repeat;
						background-size: 100% 100%;
					}

					50% {
						background: url(../../static/img/mine/aaa.png) no-repeat;
						background-size: 100% 100%;
					}

					51% {
						background: url(../../static/img/mine/bbb.png) no-repeat;
						background-size: 100% 100%;
					}

					100% {
						background: url(../../static/img/mine/bbb.png) no-repeat;
						background-size: 100% 100%;
					}
				}

				.qr {

					position: relative;
					display: inline-block;

					img {
						width: 180px;
						height: 180px;
					}

					// background: url(../../static/img/mine/aaa.png) no-repeat;
					background-size: 100% 100%;
					padding: 18px;
					animation-name:identifier;
					animation-duration: 0.5s;
					animation-iteration-count: infinite;
				}

				.status {
					margin-top: 10px;
					font-size: 12px;
					color: #16c067;
				}

				.edit {
					margin-top: 10px;
					display: flex;
					align-items: center;
					justify-content: center;
					font-size: 13px;
					color: #0079fe;

					img {
						width: 15px;
						height: 14px;
						margin-right: 2px;
					}
				}

				.sbmt {
					margin-top: 10px;

					button {
						
						border-radius: 20px;
						background-color: #0079fe;
						color: white;
					}

					img {
						width: 15px;
						height: 15px;
						margin-right: 8px;
						font-size: 20rpx;
					}
					

				}

				.row {
					display: flex;
					justify-content: space-between;
					margin-bottom: 12px;

					.start {
						display: flex;
						align-items: center;
						font-size: 15px;
						font-weight: 700;

						.start-status {
							font-weight: 100;
							border: #0079fe solid 1px;
							border-radius: 4px;
							color: #0079fe;
							font-size: 10px;
							padding: 2px;
							margin-left: 4px;
						}
					}

					.end {
						color: #16c067;
						font-size: 12px;
					}

				}

			}
		}

	}
</style>
